<template>
  <div class="user">
    <user-search @query-click="handleQueryClick" @resetClick="handleResetClick"></user-search>
    <user-content
      ref="contentRef"
      @newBtnClick="handleNewBtnClick"
      @editBtnClick="handleeditBtnClick"
    ></user-content>
    <userModal ref="modelRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import userSearch from './c-cpns/user-search.vue'
import userContent from './c-cpns/user-content.vue'
import userModal from './c-cpns/user-modal.vue'

// 对contentRef进行类型声明
const contentRef = ref<InstanceType<typeof userContent>>()
function handleQueryClick(formData) {
  console.log(formData, '--vw')
  // 通过ref来捞取组件的方法
  contentRef.value?.fetchUserListData(formData)
}
function handleResetClick() {
  contentRef.value?.fetchUserListData()
}

// 弹窗组件操作
const modelRef = ref<InstanceType<typeof userModal>>()
function handleNewBtnClick() {
  modelRef.value?.setModelVisible()
}

function handleeditBtnClick(rowData: any) {
  modelRef.value?.setModelVisible(false, rowData)
}
</script>

<style lang="less" scoped>
.user {
  color: red;
}
</style>
